// 导入路由
import { Router, Route, Switch, Redirect } from "react-router-dom"
import { createBrowserHistory } from "history"
import React, { Suspense } from "react"

// 导入封装的路由守卫组件
import AuthRoute from "components/AuthRoute/"

// import Layout from "page/Layout/Layout.js"
// import Login from "page/Login/Login.js"
// // 导入页面组件
const Layout = React.lazy(() => import("page/Layout/Layout"))
const Login = React.lazy(() => import("page/Login/Login"))

const history = createBrowserHistory()
function App() {
  return (
    <Router history={history}>
      <div className="App">
        {/* <Link to="/home">首页</Link>
        <Link to="/login">登录</Link> */}
        {/* 路由配置规则1 */}
        <Suspense
          fallback={
            <div
              style={{
                textAlign: "center",
                marginTop: 200
              }}>
              loading...
            </div>
          }>
          <Switch>
            <Redirect exact from="/" to="/home"></Redirect>
            {/* <Route path="/home" component={Layout}></Route> */}
            <AuthRoute path="/home" component={Layout}></AuthRoute>
            <Route path="/login" component={Login}></Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}

export default App
